<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Blog</title>
    <link rel="stylesheet" th:href="@{/css/semantic.min.css}">
    <link rel="stylesheet" th:href="@{/css/me.css}">
    <link rel="stylesheet" th:href="@{/css/animate.css}">
</head>
<body class="m-body">

    <!--头部导航-->
    <div th:replace="common-2::headermenu(1)"></div>

    <!--中间内容-->
    <div class="m-padded-tb-large">
        <div class="ui container">
            <div class="ui stackable grid">
                <!--左边博客列表-->
                <div class="eleven wide column animate__animated animate__fadeInLeft">

                    <!--header-->
                    <div class="ui segment">
                        <div class="ui middle aligned two column grid">
                            <div class="column">
                                <h3 class="ui teal header">博客</h3>
                            </div>
                            <div class="right aligned column">
                                共 <h2 class="ui orange header m-inline-block m-text-thin">[[${count}]]</h2> 篇
                            </div>
                        </div>
                    </div>

                    <!--content-->
                    <!--<div class="ui segment">-->

                        <div class="ui stackable segment m-padded-tb-large m-padded-rl m-margin-b-large" th:if="${pageInfo.total==0}">
                            <div style="height: 600px;text-align: center">
                                <p class="m-text-thin m-padded-tb-large" style="font-size: 16px">这里空空如也</p>
                                <p class="m-text-thin" style="font-size: 16px">博客小哥正在奋笔疾书中...</p>
                                <img class="ui centered image" th:src="@{/img/yellow-duck2.png}">
                            </div>
                        </div>

                        <div class="ui stackable segment m-padded-tb-large m-padded-rl m-margin-b-large" th:each="blog:${pageInfo.list}">
                            <div class="column">
                                <h3 class="ui header"><a th:href="@{/blog(id=${blog.id})}" style="color: black">[[${blog.title}]]</a></h3>
                                <p class="m-text" th:text="${blog.content}"></p>
                                <div class="ui stackable grid">
                                    <div class="twelve wide column">
                                        <div class="ui horizontal link list">
                                            <div class="item">
                                                <img th:src="${blog.user.avatar}" width="100px" height="100px" class="ui avatar image">
                                                <div class="content">
                                                    <div style="color: #868e96" class="header" th:text="${blog.user.nickname}">aQian</div>
                                                </div>
                                            </div>
                                            <div class="item">
                                                <i class="calendar icon"></i>[[${#dates.format(blog.createTime,'yyyy-MM-dd')}]]
                                            </div>
                                            <div class="item">
                                                <i class="eye icon"></i>[[${blog.views}]]
                                            </div>
                                        </div>
                                    </div>
                                    <div class="right aligned three wide column">
                                        <a th:href="@{/type(id=${blog.type.id})}" target="_blank" class="ui teal basic label m-padded-tb-mini-rl-tiny" th:text="${blog.type.name}"></a>
                                    </div>
                                </div>
                            </div>
                        </div>

                    <!--</div>-->

                    <!--footer-->
                    <div class="ui bottom segment" th:if="${pageInfo.total>pageInfo.pageSize}">
                        <div class="ui middle aligned two column grid">
                            <div class="column">
                                <a th:href="@{/(pageNum=${pageInfo.pageNum}-1)}" th:if="${pageInfo.hasPreviousPage}" class="ui mini teal basic button">上一页</a>
                            </div>
                            <div class="right aligned column">
                                <a th:href="@{/(pageNum=${pageInfo.pageNum}+1)}" th:if="${pageInfo.hasNextPage}" class="ui mini teal basic button">下一页</a>
                            </div>
                        </div>
                    </div>

                </div>


                <!--右边的top-->
                <div class="five wide column animate__animated animate__fadeInRight">
                  <!--  <div class="ui segment">
                        <img th:src="@{/img/bg.jpg}"  class="ui rounded image">
                        <img th:src="${user.avatar}" width="70px" height="70px" class="ui centered circular image p">
                        <p class="ui center aligned header m-padded-tb-min p2" th:text="${user.nickname}">admin</p>
                        <p class="ui center aligned header p3 m-text-f">I want something just like this</p>
                        <div class="ui center aligned container p2 m-padded-t-tiny">
                            <span class="m-padded-rl-small"><a class="ui teal circular icon button" href="https://github.com/admin0820"><i class="github icon"></i> </a></span>
                            <span class="m-padded-rl-small"><a class="ui wechat green circular icon button"><i class="weixin icon"></i> </a></span>
                            <span class="m-padded-rl-small"><a class="ui qq blue circular icon button" data-content="1270768450" data-position="bottom center"><i class="qq icon"></i> </a></span>
                        </div>
                        <div class="ui weichat-qr flowing popup transition hidden">
                            <img th:src="@{/img/weixin.png}" class="ui rounded image" style="width: 120px;height: 120px;">
                        </div>
                    </div>-->

                    <!--分类-->
                    <div class="ui segment">
                    <!--<div class="ui segment m-margin-t-large">-->
                        <div class="ui secondary segment">
                            <div class="ui two column grid">
                                <div class="column">
                                    <i class="idea icon"></i>分类
                                </div>
                                <div class="right aligned column">
                                    <a th:href="@{/type}" target="_blank">more<i class="angle double right icon"></i></a>
                                </div>
                            </div>
                        </div>
                        <div class="ui teal segment">
                            <div class="ui fluid vertical menu">
                                <a th:href="@{/type(id=${type.id})}" class="item" th:each="type:${typesPageInfo.list}">
                                    [[${type.name}]]
                                    <div class="ui teal basic left pointing label" th:text="${type.count}"></div>
                                </a>
                            </div>
                        </div>
                    </div>

                    <!--最新推荐-->
                    <!--<div class="ui segment m-margin-tb-large">-->
                    <div class="ui segment m-margin-t-large">
                        <div class="ui secondary segment">
                            <i class="paper plane icon"></i>最新推荐
                        </div>
                        <div class="ui container" th:if="${recommendBlogs.size()==0}" style="text-align: center;height: 50px;line-height: 50px;color: #868e96">——TOTALY 0 POSTS——</div>
                        <div class="ui segment" th:each="recommendBlog:${recommendBlogs}">
                            <a th:href="@{/blog(id=${recommendBlog.id})}" target="_blank" class="m-text-thin m-padded-rl">[[${recommendBlog.title}]]&nbsp;&nbsp;<i class="hotjar red icon"></i></a>
                        </div>
                    </div>

                    <!--二维码-->
<!--                    <h4 class="ui horizontal divider header">如果喜欢的话</h4>
                    <div class="ui centered card" style="width: 11em">
                        <img th:src="@{/img/weixin.png}" alt="" class="ui rounded image">
                    </div>-->
                </div>

            </div>
        </div>
    </div>

    <!--底部footer-->
    <div th:replace="common-2::footermenu"></div>
    <!--script-->
    <div th:replace="common-2::scriptmenu"></div>

    <script type="text/javascript">
        $(function () {
            $("#btn").click(function () {
                $(".m-item").toggleClass('m-mobile-hide');
            })
            $(".qq").popup()

            $(".wechat").popup({
                popup : $(".weichat-qr"),
                on : 'hover',
                position : 'bottom center'
            })
        })

        document.documentElement.style.setProperty('--animate-duration', '1.5s');
    </script>
</body>
</html>